<template>
  <div class='container'>
莫昌省
    <el-card>
      <el-breadcrumb separator="/" v-show=" falg">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">目录管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>标签</el-breadcrumb-item>
      </el-breadcrumb>
      <div style="margin-top: 20px">
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <el-form ref="form" v-model="tagList" label-width="80px">
              <el-form-item label="标签名称">
                <el-input></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form ref="form" label-width="80px">
              <el-form-item label="状态">
                <el-select placeholder="请选择活动区域" v-model="value">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-button>清除</el-button>
                <el-button type="primary">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4">
            <span class="back" @click="Returns" v-show="falg" style="padding-top:10px;">
              <i class=" el-icon-back back"> </i>
              返回学科
            </span>
          </el-col>
          <el-col :span="2">
            <el-row type="flex" justify="end">
              <el-button type="success"> <i class="el-icon-edit"></i>新增标签</el-button>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-alert style="margin:0 0 15px 0" type="info" show-icon :closable="false">
        <template slot="title">数据一共{{ total }}条</template>
      </el-alert>
      <el-table :data="tagList" border stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column label="标签名称" prop="directoryName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template v-slot="{row}">
            {{row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals">
        </el-table-column>
        <el-table-column label="状态">
          <template v-slot="{row}">
            <span v-if="row.state ===1"> 启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" type="">
          <template v-slot="{row}">
            <el-button type="text" style="color:#409EFF" size='small' v-if="row.state===0" @click="handletager(row)">启用
            </el-button>
            <el-button type="text" size='small' v-else @click="handletager(row)">禁用</el-button>
            <el-button :disabled='row.state===1?true:false' type="text" size='small' ref="edit">修改
            </el-button>
            <el-button @click="handleDelete(row)" :disabled='row.state===1?true:false' type="text" size='small'
              ref="delete">
              删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryIfon.page" :page-sizes="[2, 5, 6, 10]" :page-size="queryIfon.pagesize"
        layout="prev, pager, next ,sizes,total" :total=" total ">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
import { list, detail, changeState, remove } from '@/api/hmmm/directorys.js'
export default {
  data () {
    return {
      falg: false,
      value: '',
      label: '启用',
      options: [],
      rowState: true,
      // 状态复选框
      tateOptions: [{
        value: '1',
        label: '启动'
      }, {
        value: '0',
        label: '禁用'
      }],
      queryIfon: {
        page: 1,
        pagesize: 10,
        subjectID: ''
      },
      tagList: [],
      total: 0

    }
  },
  async created () {
    this.getlist()
    const add = this.$route.query.id
    if (add) {
      console.log(add)
      this.falg = true
      const res = await detail({ params: add })
      console.log(res)
      this.tagList = res.data
      //  this.getlist()
    }
  },
  watch: {
    total () {
      if (this.total === (this.queryIfon.page - 1) * this.queryIfon.pagesize && this.total !== 0) { // 这一行是关键代码，倍数关系
        this.queryIfon.page -= 1
        this.getlist()// 获取表格数据的方法
      }
    }
  },
  methods: {
    // 启用禁用切换-未完成
    async handletager (row) {
      console.log(row)
      const text = row.state === 0 ? '启用' : '禁用'
      this.$confirm(`此操作将${text}该标签, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (row.state === 1) {
          this.rowState = true
        } else {
          this.rowState = false
        }
        row.state = this.rowState === true ? 0 : 1
        const { data: res } = await changeState(row)
        console.log(res)
        if (!res.success) this.$message.error('状态编辑失败')
        this.$message.success('状态编辑成功')
        // this.getArticlesList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消编辑'
        })
      })
    },
    // 删除
    async handleDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(row)
        const data = await remove(row)
        console.log(data)
        if (data.status !== 200) return this.$message.error('删除失败')
        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 返回科目
    Returns () {
      this.$router.push('/subjects/list')
    },
    async getlist () {
      const res = await list({ params: this.queryIfon })
      console.log(res)
      if (res.status !== 200) return this.$message.error('获取失败')
      // this.$message.success('获取成功')
      this.tagList = res.data.items
      this.total = res.data.counts
      console.log(this.total)
    },
    // 改变时会触发每页条数
    handleSizeChange (size) {
      console.log(size)
      this.queryIfon.pagesize = size
      this.getlist()
    },
    // 改变时会触发当前页条
    handleCurrentChange (page) {
      this.queryIfon.page = page
      this.getlist()
    }
  }
}
</script>

<style scoped lang='less'>
.el-button {
  margin-left: 15px;
}
::v-deep .el-iconInfo {
  background: #f4f4f5;
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 20px;
}
.el-link {
  padding-left: 15px;
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
/deep/ .el-breadcrumb__inner a,
.el-breadcrumb-item,
/deep/ .router-link,
.el-breadcrumb__inner.is-link {
  color: #000 !important;
  padding: 0 10px;
}
.el-breadcrumb {
  padding: 10px 20px;
  border-bottom: 1px solid #ebeef5;
}
.back {
  color: #04befa;
}
</style>
